<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tab Menu Test</title>
<link rel="stylesheet" href="../css/JinReset.css" /><!-- css 초기화 -->
<link rel="stylesheet" href="css/layout.css" />
<!-- JS 불러오기 -->
<script src="js/jquery-1.9.1.js"></script>
<script src="../js/topBtn.js"></script>
<script> 
$(function() { 
	$(".tab_content").hide(); 
	$(".tab_content:first").show(); 

	$("ul.tabs li").click(function() { 
	$("ul.tabs li").removeClass("active").css("color","#333"); 
	//$(this).addClass("active").css({"color": "darkred","font-weight": "bolder"}); 
	$(this).addClass("active").css("color","red"); 
	$(".tab_content").hide() 
	var activeTab = $(this).attr("rel"); 
	$("#"+activeTab).fadeIn() 
	}); 
}); 
</script> 
<style>
	#container{width:900px;margin:50px auto}
	#container .tabs{float:left;list-style:none;height:32px;border-left:1px solid #eee;font-family:"dotum";font-size:12px;width:500px} 
	#container .tabs li{background:#F90;float:left;text-align:center;cursor:pointer;width:82px;height:31px;line-height:31px;border:1px solid #eee;border-left:none;font-weight:bold;overflow:hidden;position:relative} 
	#container .tab_container{border:1px solid #eee;clear:both;float:left;width:900px;background:#fff}
	#container .tabs li.active{background:#fff;border-bottom:1px solid #fff;color:red}
	#container .tab_container .tab_content{padding:5px;font-size:12px;display:none;height:550px;background-color:#CCFFCC}
</style>
</head>
<body>
<div id="wrap">
	<h2>Tab Menu 클릭시 스크롤을 일정한 위치에 고정한 채 내용이 바뀝니다.</h2>
	<a class="link" href="index.html">목록으로</a>
  <a id="btn_bottom" class="link" href="#bottom">아래로</a>
  <div id="container">
    <ul class="tabs">
      <li class="active" rel="tab1">Tab 1</li>
      <li rel="tab2">Tab 2</li>
      <li rel="tab3">Tab 3</li>
      <li rel="tab4">Tab 4</li>
    </ul>
    <div class="tab_container">
      <div id="tab1" class="tab_content">
        <h4>Tab 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat non libero et sagittis. In vel nisl est. Aliquam porta sem nec est egestas, sit amet lacinia justo vestibulum. Cras ullamcorper pulvinar aliquam. Nam vitae nisi dictum, consectetur erat id, iaculis dui. Proin tincidunt orci vitae dui ultrices, in luctus libero faucibus. Phasellus urna ligula, pharetra a est nec, facilisis fermentum purus. Quisque ornare nisi sodales scelerisque convallis. Sed at lorem placerat, ultricies ante vitae, gravida augue. Nullam vehicula tempus eleifend. Nulla mollis viverra magna a pretium. Donec et facilisis eros. Sed erat odio, lobortis in aliquet non, ultricies in leo. Praesent ultricies elit sed erat congue ornare. Nam adipiscing eget lorem vel consequat.<br/><br/>Praesent vitae nisi tellus. Donec lacinia ultrices odio, sit amet suscipit tortor luctus a. Fusce nisl ante, suscipit et lacus nec, laoreet imperdiet eros. Aliquam enim nulla, lobortis ut velit at, lacinia imperdiet dui. Fusce et tempor mauris. Fusce iaculis sapien sed convallis sodales. Nulla ac felis vitae dui mattis porta quis et metus. Nam est libero, vestibulum quis massa et, venenatis vestibulum libero. Nam vehicula mattis dolor ac iaculis.<br/><br/>Fusce quis libero ac felis blandit auctor. Quisque nec erat gravida arcu elementum iaculis sed vitae ligula. Duis a ipsum consequat quam tempor pellentesque ac vitae nibh. Mauris interdum id lectus in blandit. Mauris quis tellus fermentum, fringilla mauris eu, imperdiet erat. Aenean fringilla id metus non suscipit. Phasellus tincidunt hendrerit eleifend. Proin bibendum placerat eros, tempus fermentum ligula rhoncus ac. Aenean eget tortor sit amet justo venenatis elementum. Proin a sapien adipiscing, lacinia nisl sit amet, lacinia ante. Sed sed ornare ligula. Sed ullamcorper odio sit amet dui mattis, id fringilla arcu venenatis. Pellentesque dolor urna, ultrices porta semper eget, luctus vel est. Cras dapibus sed lorem vel bibendum. Ut et neque ac velit placerat pharetra.</p>
      </div><!-- #tab1 -->
      <div id="tab2" class="tab_content">
        <h4>Tab 2</h4>
        <p>Nullam vitae varius massa, vel iaculis libero. Proin imperdiet laoreet quam. Proin viverra mi quis arcu cursus, eget dapibus magna placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ultricies et nisi vitae auctor. Nulla eget vestibulum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas neque erat, nec feugiat urna dictum id. Integer sapien orci, ornare vulputate neque sed, pellentesque feugiat ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur placerat odio in tortor varius, ut dignissim quam aliquam. Vivamus ac nunc lobortis risus pretium fringilla quis in risus.<br/><br/>Praesent ultrices a mauris sed malesuada. Duis ac iaculis elit, et dapibus quam. Aliquam semper in libero ac tincidunt. Suspendisse cursus a enim quis consectetur. Curabitur feugiat eu ipsum sed tempor. Donec eu dolor magna. Mauris convallis, justo et viverra accumsan, ante libero vehicula dolor, in tristique nunc mi id lorem. Vivamus porttitor, mauris convallis egestas commodo, nisl nibh euismod sem, ut rutrum dui nibh eu nisi. Donec iaculis luctus arcu quis blandit. In a gravida turpis. Vivamus et imperdiet velit. Cras scelerisque ultricies sapien, non sodales nibh egestas non.<br/><br/>Vivamus vulputate metus facilisis tellus viverra, a euismod est facilisis. Fusce commodo odio non arcu volutpat, quis ornare tellus vehicula. Suspendisse ligula sem, varius vitae velit nec, auctor lobortis arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin rutrum dolor eget euismod sagittis. Vestibulum congue sagittis magna, eget euismod metus scelerisque et. Aenean tristique ultricies erat. Duis facilisis malesuada diam, eget vestibulum odio tristique sed.<br/><br/>Duis ullamcorper erat turpis, non bibendum sem suscipit non. Maecenas a tellus pulvinar, congue mauris vel, posuere nulla. Curabitur lacus augue, pretium eu condimentum a, mollis et turpis. Morbi elementum placerat metus eu suscipit. Nunc a hendrerit lectus, sed dignissim arcu. Phasellus ornare metus erat, ac dignissim enim varius non. Aenean in tortor varius lorem tristique porta. Morbi purus risus, lacinia vitae gravida sed, malesuada bibendum justo. Donec bibendum hendrerit vehicula. Vivamus ut orci aliquam odio bibendum bibendum. Suspendisse pretium dolor vitae nibh facilisis, id consectetur purus interdum.<br/><br/>Ut malesuada arcu vitae quam convallis volutpat. Vestibulum lacinia lacinia pellentesque. Etiam id sagittis urna, non auctor turpis. Cras sem eros, tempus sit amet vestibulum sit amet, semper at eros. Curabitur pulvinar luctus dolor, sit amet egestas augue aliquam et. Aenean sodales eros eu lobortis hendrerit. Phasellus lobortis, metus et convallis ullamcorper, ligula orci ullamcorper augue, et semper massa nunc eu tellus. Fusce gravida augue eget auctor placerat. Duis tempor fringilla nibh, nec tincidunt augue lacinia pellentesque. Pellentesque et dictum orci, ut venenatis nibh. Pellentesque aliquam convallis porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
      </div><!-- #tab2 -->
      <div id="tab3" class="tab_content">
        <h4>Tab 3</h4>
        <p>Donec dui diam, dignissim sed nulla sit amet, fringilla posuere leo. In nec mauris ut mi tempus vestibulum eu quis velit. Curabitur eget neque eget dui feugiat congue. Sed sollicitudin metus quis dignissim condimentum. Sed in vulputate justo. Curabitur semper lobortis risus a blandit. Nunc at sem nisi. In hac habitasse platea dictumst.<br/><br/>Proin vitae tellus pharetra, condimentum nunc tempor, hendrerit tellus. Nunc interdum et diam ac ultrices. In hac habitasse platea dictumst. Donec sollicitudin sem ac lacus porttitor euismod. Aenean id commodo tellus, ac ultricies odio. Nulla cursus ipsum at blandit feugiat. Nam sit amet volutpat ipsum. Nulla justo ipsum, imperdiet in elementum id, tempus in dolor. Cras nec enim nunc. Suspendisse eget lorem cursus nunc tempus porttitor. Fusce velit lectus, porta ac vehicula quis, viverra hendrerit ante. In nec interdum nibh.</p>
      </div><!-- #tab3 -->
      <div id="tab4" class="tab_content">
        <h4>Tab 4</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat non libero et sagittis. In vel nisl est. Aliquam porta sem nec est egestas, sit amet lacinia justo vestibulum. Cras ullamcorper pulvinar aliquam. Nam vitae nisi dictum, consectetur erat id, iaculis dui. Proin tincidunt orci vitae dui ultrices, in luctus libero faucibus. Phasellus urna ligula, pharetra a est nec, facilisis fermentum purus. Quisque ornare nisi sodales scelerisque convallis. Sed at lorem placerat, ultricies ante vitae, gravida augue. Nullam vehicula tempus eleifend. Nulla mollis viverra magna a pretium. Donec et facilisis eros. Sed erat odio, lobortis in aliquet non, ultricies in leo. Praesent ultricies elit sed erat congue ornare. Nam adipiscing eget lorem vel consequat.<br/><br/>Praesent vitae nisi tellus. Donec lacinia ultrices odio, sit amet suscipit tortor luctus a. Fusce nisl ante, suscipit et lacus nec, laoreet imperdiet eros. Aliquam enim nulla, lobortis ut velit at, lacinia imperdiet dui. Fusce et tempor mauris. Fusce iaculis sapien sed convallis sodales. Nulla ac felis vitae dui mattis porta quis et metus. Nam est libero, vestibulum quis massa et, venenatis vestibulum libero. Nam vehicula mattis dolor ac iaculis.<br/><br/>Fusce quis libero ac felis blandit auctor. Quisque nec erat gravida arcu elementum iaculis sed vitae ligula. Duis a ipsum consequat quam tempor pellentesque ac vitae nibh. Mauris interdum id lectus in blandit. Mauris quis tellus fermentum, fringilla mauris eu, imperdiet erat. Aenean fringilla id metus non suscipit. Phasellus tincidunt hendrerit eleifend. Proin bibendum placerat eros, tempus fermentum ligula rhoncus ac. Aenean eget tortor sit amet justo venenatis elementum. Proin a sapien adipiscing, lacinia nisl sit amet, lacinia ante. Sed sed ornare ligula. Sed ullamcorper odio sit amet dui mattis, id fringilla arcu venenatis. Pellentesque dolor urna, ultrices porta semper eget, luctus vel est. Cras dapibus sed lorem vel bibendum. Ut et neque ac velit placerat pharetra.<br/><br/>Nullam vitae varius massa, vel iaculis libero. Proin imperdiet laoreet quam. Proin viverra mi quis arcu cursus, eget dapibus magna placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ultricies et nisi vitae auctor. Nulla eget vestibulum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas neque erat, nec feugiat urna dictum id. Integer sapien orci, ornare vulputate neque sed, pellentesque feugiat ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur placerat odio in tortor varius, ut dignissim quam aliquam. Vivamus ac nunc lobortis risus pretium fringilla quis in risus.<br/><br/>Praesent ultrices a mauris sed malesuada. Duis ac iaculis elit, et dapibus quam. Aliquam semper in libero ac tincidunt. Suspendisse cursus a enim quis consectetur. Curabitur feugiat eu ipsum sed tempor. Donec eu dolor magna. Mauris convallis, justo et viverra accumsan, ante libero vehicula dolor, in tristique nunc mi id lorem. Vivamus porttitor, mauris convallis egestas commodo, nisl nibh euismod sem, ut rutrum dui nibh eu nisi. Donec iaculis luctus arcu quis blandit. In a gravida turpis. Vivamus et imperdiet velit. Cras scelerisque ultricies sapien, non sodales nibh egestas non.<br/><br/>Vivamus vulputate metus facilisis tellus viverra, a euismod est facilisis. Fusce commodo odio non arcu volutpat, quis ornare tellus vehicula. Suspendisse ligula sem, varius vitae velit nec, auctor lobortis arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin rutrum dolor eget euismod sagittis. Vestibulum congue sagittis magna, eget euismod metus scelerisque et. Aenean tristique ultricies erat. Duis facilisis malesuada diam, eget vestibulum odio tristique sed.<br/><br/>Duis ullamcorper erat turpis, non bibendum sem suscipit non. Maecenas a tellus pulvinar, congue mauris vel, posuere nulla. Curabitur lacus augue, pretium eu condimentum a, mollis et turpis. Morbi elementum placerat metus eu suscipit. Nunc a hendrerit lectus, sed dignissim arcu. Phasellus ornare metus erat, ac dignissim enim varius non. Aenean in tortor varius lorem tristique porta. Morbi purus risus, lacinia vitae gravida sed, malesuada bibendum justo. Donec bibendum hendrerit vehicula. Vivamus ut orci aliquam odio bibendum bibendum. Suspendisse pretium dolor vitae nibh facilisis, id consectetur purus interdum.<br/><br/>Ut malesuada arcu vitae quam convallis volutpat. Vestibulum lacinia lacinia pellentesque. Etiam id sagittis urna, non auctor turpis. Cras sem eros, tempus sit amet vestibulum sit amet, semper at eros. Curabitur pulvinar luctus dolor, sit amet egestas augue aliquam et. Aenean sodales eros eu lobortis hendrerit. Phasellus lobortis, metus et convallis ullamcorper, ligula orci ullamcorper augue, et semper massa nunc eu tellus. Fusce gravida augue eget auctor placerat. Duis tempor fringilla nibh, nec tincidunt augue lacinia pellentesque. Pellentesque et dictum orci, ut venenatis nibh. Pellentesque aliquam convallis porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br/><br/>Donec dui diam, dignissim sed nulla sit amet, fringilla posuere leo. In nec mauris ut mi tempus vestibulum eu quis velit. Curabitur eget neque eget dui feugiat congue. Sed sollicitudin metus quis dignissim condimentum. Sed in vulputate justo. Curabitur semper lobortis risus a blandit. Nunc at sem nisi. In hac habitasse platea dictumst.<br/><br/>Proin vitae tellus pharetra, condimentum nunc tempor, hendrerit tellus. Nunc interdum et diam ac ultrices. In hac habitasse platea dictumst. Donec sollicitudin sem ac lacus porttitor euismod. Aenean id commodo tellus, ac ultricies odio. Nulla cursus ipsum at blandit feugiat. Nam sit amet volutpat ipsum. Nulla justo ipsum, imperdiet in elementum id, tempus in dolor. Cras nec enim nunc. Suspendisse eget lorem cursus nunc tempus porttitor. Fusce velit lectus, porta ac vehicula quis, viverra hendrerit ante. In nec interdum nibh.</p>
      </div><!-- #tab3 --> 
    </div> <!-- .tab_container --> 
  </div> <!-- #container --> 
	<a class="link" href="index.html">목록으로</a>
  <a id="btn_top" class="link" href="#top">맨위로</a>
</div>
</body>
</html>
